<template>
	<view class="page-box top bottom">
		<SearchCom :searchFun="searchFun" :data="search" :resetSearchFun="resetSearchFun" :confirmSearchFun="confirmSearchFun" placeholder="请输入名称">
				<view class="search-item">
					<view class="search-item-title">
						地址
					</view>
					<input class="search-item-input" v-model="search.address"  placeholder="请输入内容" />
				</view>
			
		</SearchCom>
		
		<view class="list-box">
			
			<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goDetail(item)">
				<uni-swipe-action>
					<!-- 使用插槽 （请自行给定插槽内容宽度）-->
					<uni-swipe-action-item>
						<view class="list-item-content">
							<view class="name">{{item.name}}</view>
							<view class="address">{{item.address}}</view>
						</view>
						
						<template v-slot:right>
							<view class="swipe-btn">
								<view v-if="userInfo && userInfo.ifedite == '1'" class="edit-btn" @click.stop="editFun(item)">
									编辑
								</view>
								<view v-if="userInfo && userInfo.ifdelete == '1'" class="del-btn" @click.stop="delFun(item.id)">
									删除
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
			</view>
		</view> 
		
		<view class="load-more" v-if="hasMore && showMore">
				加载中...
		</view>
		
		<view class="load-more" v-if="!hasMore">
				没有更多了~
		</view>
		<view class="bottom-btn" v-if="userInfo && userInfo.ifadd == '1'">
				<button type="primary" class="btn-confirm" size="mini" @click="createFun">创建仓库</button>
		</view>
		
		<uni-popup ref="popupRef" type="bottom" background-color="#fff">
			<view class="input-box">
				<view class="input-item">
					<view class="label"><text class="must">*</text>仓库名称</view>
					<view class="input-icon">
						<input class="input" v-model="form.name" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-item">
					<view class="label"><text class="must">*</text>仓库地址</view>
					<view class="input-icon">
						<input class="input" v-model="form.address" placeholder="请输入内容" />
						<view class="icon hide iconfont icon-youjiantou"></view>
					</view>
				</view>
				<view class="input-save-box">
					<view class="input-save" @click="saveFun">保存</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import SearchCom from "@/components/common/SearchCom/SearchCom.vue";
	import { GetCangkuList, CreateCangku, EditCangku, DelteteCangku } from "@/configure/api/cangku.js"
	import {
	    onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import { computed, onMounted, ref, watch } from "vue"
	import { showSuccessMsg } from "@/utils/msg";
	import { getUserInfo } from "@/utils/getUserInfo.js"
	
	const userInfo = ref()
	const pageNo = ref(1);
	const pageSize = ref(10);
	const total = ref(10);
	const showMore = ref(false);
	const lists = ref([])
	
	const search = ref({
		name: '',
		address: ''
	})
	
	const searchFun = (keywords)=>{
		search.value.name = keywords
		getLists(true)
	}
	
	
	const resetSearchFun = () => {
		search.value = {
			name: '',
			address: ''
		}
	}
	
	const confirmSearchFun = () => {
		searchFun()
	}
	
	const getLists = (reload) => {
		
		showMore.value = true;
		
		if(reload){
			pageNo.value = 1
			lists.value = []
		}
		
		const opt = {pageNo: pageNo.value,pageSize: pageSize.value};
		
		Object.keys(search.value).forEach((v,i)=>{
			if(search.value[v]){
				opt[v] = search.value[v]
			}
		})

		GetCangkuList(opt).then((data)=>{
			lists.value = [...lists.value,...data.data];
			lists.value = lists.value.map(v=>{
				return{
					...v,
				}
			})
			let obj = {};
			
			lists.value = lists.value.reduce (function(item,next){
			
				obj[next.id] ? ' ' : obj[next.id]  = true && item.push(next)
				
				return item;
			
			},[]);
			
			total.value = parseInt(data.msg);
			showMore.value = false;
			uni.stopPullDownRefresh();
			
		})

		
	}
	
	onPullDownRefresh(()=> {
		getLists(true);
	}) 
	
	const hasMore = computed(()=>{
		return pageNo.value * pageSize.value < total.value
	})
	
	onReachBottom(()=>{
		if(  hasMore.value && !showMore.value ){
			pageNo.value ++;
			getLists();
		}
		
	})
	
	onLoad((detail)=>{
		getLists(true);
	})
	
	onShow((detail)=>{
		getUserInfo().then((res)=>{
			userInfo.value = res;
		})
	})
	
	const popupRef = ref()
	const form = ref({
		id: '',
		name: '',
		address: ''
	})
	const status = ref('add')
	
	const goDetail = (item) => {		
	}
	
	const createFun = () => {
		form.value = {
			name: '',
			address: ''
		}
		status.value = 'add'
		popupRef.value.open()
	}
	
	const editFun = (item) => {
		let { id,name,address } = item
		form.value = {
			id,
			name,
			address
		}
		status.value = 'edit'
		popupRef.value.open()
	}
	
	const saveFun = async() => {
		let {
			id,
			name,
			address
		} = form.value;
		
		if(!name){
			showErrMsg(`请输入名称!`)
			return
		}
		
		if(!address){
			showErrMsg(`请输入地址!`)
			return
		}
		
		let opt = {
			name,
			address
		}
		
		if(status.value == 'add'){
			let res = await CreateCangku(opt);
			if(res.code == 200){
				showSuccessMsg("创建成功!");
				popupRef.value.close()
				getLists(true)
			}
		} else if(status.value == 'edit'){
			opt.id = id;
			let res = await EditCangku(opt);
			if(res.code == 200){
				showSuccessMsg("编辑成功!");
				popupRef.value.close()
				getLists(true)
			}
		}
	}
	
	const delFun = (id) => {
		uni.showModal({
		    title: '提示',
		    content: '确认删除?',
		    success: async function (res) {
		        if (res.confirm) {
					
					let res = await DelteteCangku({id})
					if(res.code == 200){
						showSuccessMsg("删除成功!");
						getLists(true)
					}
					
		        } else if (res.cancel) {
		            
		        }
		    }
		});
	}
	
</script>

<style lang="scss">
.page-box{
	.list-box{

		.list-item{
			background-color: #fff;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(209,217,225,0.36);
			border-radius: 8rpx;	
			margin-bottom: 32rpx;
			
			.list-item-content{
				padding: 40rpx 32rpx;
				box-sizing: border-box;
				
				.name{
					color: #16294B;
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				
				.address{
					color: #576987;
					font-size: 24rpx;
				}
			}
		}
		
		
	}
	
}


</style>
